﻿@page "/switchs"

<Block Title="Switch 开关" Introduction="提供最普通的开关应用">
    <CardBodyTemplate>
        <div class="form-inline">
            <div class="row">
                
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnValueChanged="@OnValueChanged" Value="true" OnColor="Color.Secondary" OnText="开启" OffText="关闭">Secondary</Switch></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnValueChanged="@OnValueChanged" Value="true" OnColor="Color.Success" OnText="开启" OffText="关闭">Success</Switch></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnValueChanged="@OnValueChanged" Value="true" OnColor="Color.Danger" OnText="开启" OffText="关闭">Danger</Switch></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnValueChanged="@OnValueChanged" Value="true" OnColor="Color.Warning" OnText="开启" OffText="关闭">Warning</Switch></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnValueChanged="@OnValueChanged" Value="true" OnColor="Color.Info" OnText="开启" OffText="关闭">Info</Switch></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnValueChanged="@OnValueChanged" Value="true" OnColor="Color.Dark" OnText="开启" OffText="关闭">Dark</Switch></div>
            </div>
        </div>
        <Logger @ref="Trace" class="mt-3" />
    </CardBodyTemplate>
    <CodeTemplate>
        <pre>

&lt;Switch Value="true" OnColor="Color.Primary" OnText="开启" OffText="关闭"&gt;Primary&lt;/Switch&gt;
&lt;Switch Value="true" OnColor="Color.Secondary" OnText="开启" OffText="关闭"&gt;Secondary&lt;/Switch&gt;
&lt;Switch Value="true" OnColor="Color.Success" OnText="开启" OffText="关闭"&gt;Success&lt;/Switch&gt;
&lt;Switch Value="true" OnColor="Color.Danger" OnText="开启" OffText="关闭"&gt;Danger&lt;/Switch&gt;
&lt;Switch Value="true" OnColor="Color.Warning" OnText="开启" OffText="关闭"&gt;Warning&lt;/Switch&gt;
&lt;Switch Value="true" OnColor="Color.Info" OnText="开启" OffText="关闭"&gt;Info&lt;/Switch&gt;
&lt;Switch Value="true" OnColor="Color.Dark" OnText="开启" OffText="关闭"&gt;Dark&lt;/Switch&gt;
        </pre>
    </CodeTemplate>
</Block>

<Block Title="开关大小" Introduction="提供开关大小应用">
    <CardBodyTemplate>
        <div class="form-inline">
            <div class="row">
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnColor="Color.Primary" Size="Size.ExtraLarge" OnText="开启" OffText="关闭" >primary</Switch></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnColor="Color.Secondary" Size="Size.ExtraSmall" OnText="开启" OffText="关闭" >Secondary</Switch></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnColor="Color.Success" Size="Size.Large" OnText="开启" OffText="关闭" >Success</Switch></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnColor="Color.Danger" Size="Size.Medium" OnText="开启" OffText="关闭" >Danger</Switch></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnColor="Color.Warning" Size="Size.None" OnText="开启" OffText="关闭" >Warning</Switch></div>
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnColor="Color.Info" Size="Size.Small" OnText="开启" OffText="关闭" >Info</Switch></div>
            </div>
        </div>
    </CardBodyTemplate>
    <CodeTemplate>
        <pre>
&lt;Switch OnColor="Color.Primary"  OnText="开启" OffText="关闭" &gt;Primary&lt;/Switch&gt;
&lt;Switch OnColor="Color.Secondary"  OnText="开启" OffText="关闭" &gt;Secondary&lt;/Switch&gt;
&lt;Switch OnColor="Color.Success"  OnText="开启" OffText="关闭" &gt;Success&lt;/Switch&gt;
&lt;Switch OnColor="Color.Danger"  OnText="开启" OffText="关闭" &gt;Danger&lt;/Switch&gt;
&lt;Switch OnColor="Color.Warning"  OnText="开启" OffText="关闭" &gt;Warning&lt;/Switch&gt;
&lt;Switch OnColor="Color.Info"  OnText="开启" OffText="关闭" &gt;Info&lt;/Switch&gt;
&lt;Switch OnColor="Color.Dark"  OnText="开启" OffText="关闭" &gt;Dark&lt;/Switch&gt;
&lt;Switch OnColor="Color.Light"  OnText="开启" OffText="关闭" &gt;Light&lt;/Switch&gt;
&lt;Switch OnColor="Color.Link"  OnText="开启" OffText="关闭" &gt;Link&lt;/Switch&gt;
    </pre>
    </CodeTemplate>
</Block>


<Block Title="禁用状态" Introduction="开关不可用状态。">
    <CardBodyTemplate>
        <div class="form-inline">
            <div class="row">
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnColor="Color.Primary" IsDisabled="true" OnText="开启" OffText="关闭" >primary</Switch></div>
            </div>
        </div>
    </CardBodyTemplate>
    <CodeTemplate>
        <pre>
&lt;Switch OnColor="Color.Primary" IsDisabled="true" OnText="开启" OffText="关闭" &gt;primary&lt;/Switch&gt;

    </pre>
    </CodeTemplate>
</Block>

<Block Title="开关颜色" Introduction="开关颜色设置">
    <CardBodyTemplate>
        <div class="form-inline">
            <div class="row">
                <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnColor="Color.Danger" OffColor="Color.Success" OnText="开启" OffText="关闭" >开关颜色</Switch></div>
            </div>
        </div>
    </CardBodyTemplate>
    <CodeTemplate>
        <pre>
&lt;Switch OnColor="Color.Danger"  OffColor="Color.Success" OnText="开启" OffText="关闭" &gt;开关颜色&lt;/Switch&gt;

    </pre>
    </CodeTemplate>
</Block>

<AttributeTable Items="@GetAttributes()" />